
<template>
  <div class="wrap">
    <div class="left">
      <!-- 侧边栏组件列表 -->
      <left-sidebar></left-sidebar>
    </div>

    <div class="designer-middle">
      <design-header></design-header>
      <el-form ref="formRef" :model="lowCode.model" class="demo-dynamic"
        :label-width="lowCode.globalConfig.labelWidth + 'px'" :label-position="lowCode.globalConfig.labelPosition"
        :size="lowCode.globalConfig.size">
        <draggable :key="lowCode.metaRefresh" class="drawing-board" v-model="lowCode.domTree.items"
          @click="lowCode.currentKey = ''" @add="handleAdd($event)" v-bind="{ group: 'group', animation: 200 }" tag="div"
          :disabled="lowCode.disabled" item-key="key" handle=".mover" :component-data="{ name: 'fade' }">
          <template #item="{ element, index }">
            <div>
              <low-code-parse :element="element" :key="element.key" :index="index" :parent="lowCode.domTree">
              </low-code-parse>
            </div>
          </template>
        </draggable>
      </el-form>
    </div>

    <div class="right">
      <div>
        <!-- 右侧组件配置区 -->
        <setting></setting>
      </div>
    </div>
  </div>
</template>
 
<script lang="ts">
import { computed, defineComponent, provide } from "vue";
import { lowCode } from "@/components/low-code/core/index";
import type { ComponentImp } from "@/components/low-code/core/index";
import leftSidebar from "../../sidebar/index.vue";
import setting from "../../setting/index.vue";
import designHeader from "./header/index.vue";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";
import { Cell } from "@/components/low-code/core/cell";

export default defineComponent({
  components: { leftSidebar, setting, designHeader },
  setup() {
    provide("getLowCodeInstance", () => {
      return lowCode;
    });
    const handleAdd = (event: { newIndex: number }) => {
      const newIndex = event.newIndex;
      let hasKey = lowCode.domTree.items[newIndex].key ? true : false;

      if (lowCode.domTree.items[newIndex]) {
        /****
         * 组件预处理
         */
        useComponentPretreatment(lowCode, lowCode.domTree, newIndex);
        let cacheObject = lowCode.addComponent(
          lowCode.domTree.items[newIndex]
        ) as ComponentImp;
        cacheObject.nestedChain = "board";
        lowCode.domTree.items[newIndex] = cacheObject;
        lowCode.setcurrentKey(cacheObject.key);
      }

      hasKey && lowCode.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    const configInfo = computed(() => {
      return (
        lowCode &&
        lowCode?.dataCenter &&
        lowCode?.dataCenter[lowCode.currentKey]
      );
    });

    return {
      lowCode,
      handleAdd,
      configInfo,
    };
  },
});
</script>

<style  scoped>
.wrap {
  display: flex;
}

.left {
  width: 280px;
}

.designer-middle {
  position: relative;
  flex-grow: 1;
  border: 1px dashed #999;
  height: calc(100vh - 15px);
}

.right {
  width: 320px;
}

.drawing-board {
  padding-top: 48px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 15px);
}
</style>
